<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>grid网格布局</title>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
   <!-- <meta name="viewport" content="user-scalable=0" />-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link rel="stylesheet" href="../static/css/sh.css">
    <script type="text/javascript" src="../static/js/jquery.js"> </script>
    <script type="text/javascript" src="../static/js/sh.js"> </script>
    <style>
        .sh.container{ padding-bottom: 100px}
        .sh.flex .column{ border:1px red solid;padding: 5px;height: 100px;margin: 10px}
        .sh.column3 .column{ margin: 0;border:0; height: 200px;padding: 0 }
        .sh.item{ border:1px #CCC solid;padding: 10px;margin: 10px}
        h3{ text-align: center;line-height: 80px; }
    </style>
</head>
<body>
<div class="sh container bCCC">
    <h3>对齐方式1(不换行)</h3>
    <div class="sh flex jc-space-between text-center">
        <div class="sh column w100 flex jc-start ai-center">1</div>
        <div class="sh column w100 flex jc-center ai-center">2</div>
        <div class="sh column w100 flex jc-end ai-center">3</div>
        <div class="sh column w100 flex jc-start ai-baseline">4</div>
        <div class="sh column w100 flex jc-end ai-end">4</div>
        <div class="sh column w100 flex jc-end ai-baseline">4</div>
        <div class="sh column w100 flex jc-start ai-end">4</div>
    </div>



    <h3>嵌套(宽度固定)不换行</h3>
    <div class="sh flex jc-space-between text-center">
        <div class="sh column w200 flex jc-space-between ai-center">
            <div class="sh item w50">间隔</div>
            <div class="sh item w50">相等</div>
        </div>
        <div class="sh column w200 flex jc-space-around ai-baseline">
            <div class="sh item w50">两端</div>
            <div class="sh item w50">对齐</div>
        </div>
        <div class="sh column w200 flex jc-center ai-end">
            <div class="sh item w50 mRight5 mLeft5">居中</div>
            <div class="sh item w50 mRight5 mLeft5">对齐</div>
        </div>
        <div class="sh column w200 flex jc-start ai-start">
            <div class="sh item w50 mRight5 mLeft5">左</div>
            <div class="sh item w50 mRight5 mLeft5">对齐</div>
        </div>
        <div class="sh column w200 flex jc-end ai-stretch">
            <div class="sh item w50 mRight5 mLeft5">右</div>
            <div class="sh item w50 mRight5 mLeft5">对齐</div>
        </div>

    </div>

    <h3>嵌套(宽度按百分比,不换行,子元素高度占满)</h3>
    <div class="sh flex">
        <div class="sh column f1 flex jc-space-between m10 ">
            <div class="sh item w50 flex jc-end ai-center">相等</div>
            <div class="sh item w50 flex jc-center ai-center">居中</div>
            <div class="sh item w50 flex jc-start ai-center">相等</div>
        </div>
        <div class="sh column f1 flex jc-space-around m10">
            <div class="sh item w50 flex jc-start ai-baseline">居左</div>
            <div class="sh item w50 flex jc-center ai-baseline">居中</div>
            <div class="sh item w50 flex jc-end ai-baseline">居右</div>
        </div>
        <div class="sh column f1 flex jc-center m10">
            <div class="sh item w50 mRight5 mLeft5 flex jc-start ai-end">居左</div>
            <div class="sh item w50 mRight5 mLeft5 flex jc-center ai-end">居中</div>
            <div class="sh item w50 mRight5 mLeft5 flex jc-end ai-end">居右</div>
        </div>
        <div class="sh column f1 flex jc-start m10">
            <div class="sh item w50 mRight5 mLeft5">左</div>
            <div class="sh item w50 mRight5 mLeft5">对齐</div>
        </div>
        <div class="sh column f1 flex jc-end m10">
            <div class="sh item w50 mRight5 mLeft5">右</div>
            <div class="sh item w50 mRight5 mLeft5">对齐</div>
        </div>
    </div>

    <h3>(宽度按百分,换行)</h3>
    <div class="sh flex column3">
        <div class="sh column">
            <div class="sh flex item W100">
                <div class="sh f1 bCCC mRight10">
                    1
                </div>
                <div class="sh f2 bCCC">
                    2
                </div>
            </div>
        </div>
        <div class="sh column">
            <div class="sh item W100">2</div>
        </div>
        <div class="sh column">
            <div class="sh item W100">3</div>
        </div>
        <div class="sh column">
            <div class="sh item W100">4</div>
        </div>
        <div class="sh column">
            <div class="sh item W100">5</div>
        </div>
        <div class="sh column">
            <div class="sh item W100">6</div>
        </div>
    </div>


</div>


</body>
</html>